<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
	
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	
	<script type="text/javascript" src = "../js/easyui/locale/easyui-lang-zh_CN.js"></script>
	
	<link id="easyuiTheme" type="text/css" rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
	
	<link type="text/css" rel="stylesheet" href = "../js/easyui/themes/icon.css" />
	
	<script type="text/javascript">
		<!--页面加载后执行-->
		$(function(){
			$("#grid").datagrid({
				columns :[[
					{
						field:"id",
						title:"编号",
						width:100
					},
					
					{
						field:"name",
						title:"商品名称",
						width:100
					},
					
					{
						field:"price",
						title:"价格",
						width:100
					}
				
				]],
				
				url:"product.json",//加载json数据；//json数据的访问要基于服务器
				pagination:true,//分页工具条；
				toolbar:[{
					id:"saveBtn",
					text:"保存",
					iconCls:"icon-save",
					handler:function(){
						alert("保存...");
					}
				}]
			});
		});
		
	
	</script>
	</head>
	
	<body >
		<table id ="grid"></table>
	</body>
	
	
</html>
